<script>
import districtAddRow from "@/view/components/districtAddRow.vue";
import stationSetting from "@/view/components/stationSetting.vue";

export default {
  data() {
    return {
      listMode: false, //true=>列表模式 false=>地图模式
      tableForm: {},
      tableData: [],

    }
  },
  components: {
    districtAddRow: districtAddRow,
    stationSetting: stationSetting
  },
  props: {
    tableColumns: Array,
    tableConfig: Object
  },
  methods: {
    getTableList(para) {
      this.$HttpService.get(`${this.tableConfig.control}/findTree`, para).then(res => {
        this.tableData = res;
      })
    },
    toQuery() {
      delete this.tableForm.state
      this.getTableList(this.tableForm);
    },
    resetQuery() {
      this.tableColumns.forEach(x => {
        if (x.search) this.$set(this.tableForm, x.id, '')
        if (x.id === 'state') this.$set(this.tableForm, x.id, '01')
      })
      this.getTableList();
    },
    addLineData() {
      this.$refs.discAdd.openDia('', 'add')
    },
    stationSetting(row) {
      this.$refs.stationSetting.openDia(row)
    },
    handleEdit(row) {
      this.$refs.discAdd.openDia(row, 'update')
    },
    handleDelete(row) {
      this.$confirm(`确认要删除这条数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$HttpService.del(`/${this.tableConfig.control}/delete-by-id/${row[this.tableConfig.mainKey]}`).then(() => {
          this.$message.success('删除成功！')
          this.getTableList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除！'
        })
      })
    },
    handleCurrentChange(page) {
      this.getTableList();
    },
  },
  mounted() {
    this.getTableList();
    this.tableColumns.forEach(x => {
      if (x.search) this.$set(this.tableForm, x.id, '')
      if (x.id === 'state') this.$set(this.tableForm, x.id, '01')
    })
  }
}
</script>

<template>
  <div class="table-out">
    <div class="table-form">
      <el-form ref="form" :inline="true" :model="tableForm" label-width="80px">
        <el-form-item v-for="x in tableColumns">
          <el-input size="small" v-if="x.search" :placeholder="`请输入${x.label}`"
                    v-model="tableForm[x.id]"></el-input>
        </el-form-item>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索
        </el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置
        </el-button>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="addLineData">新增数据
        </el-button>
      </el-form>
    </div>
    <div class="page-center">
      <div class="table-com">
        <el-table :data="tableData" stripe style="width: 100%" default-expand-all
                  border row-key="districtName"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column v-for="x in tableColumns" :prop="x.id" :label="x.label"
                           v-if="!x.hide">
            <template slot-scope="scope">
              <span v-if="x.getValue">{{ x.getValue(scope.row[x.id]) }}</span>
              <span v-else>{{ scope.row[x.id] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit"
                         @click="handleEdit(scope.row,'update')">编辑
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" plain
                         @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <district-add-row @onSuccess="getTableList" ref="discAdd" :table-config="tableConfig"
                          :table-columns="tableColumns"></district-add-row>
        <station-setting ref="stationSetting"></station-setting>
      </div>
    </div>
  </div>
</template>

<style scoped>
.table-form {
  width: 98%;
  padding: 20px;
  border-radius: 20px;
  background-color: white;
  margin: 0 auto;
  box-shadow: 3px 3px 3px 2px #e8e8e8;
  position: relative;
  background-image: url("../../assets/images/searbg.jpg");
  background-repeat: no-repeat;
  background-position: right -20px;
  background-size: 14%;

  .filter-item {
    position: relative;
    top: 5px
  }
}

.page-center {
  width: 100%;
  margin: 20px auto;

  .table-com {
    padding: 20px;
    border-radius: 20px;
    background-color: white;
    box-shadow: 3px 3px 3px 2px #e8e8e8;
  }
}
</style>
